<template>
    <div>
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="margin: 10px 0 10px 0;">
            <el-input clearable class="filter-item" style="width: 200px;margin-left: 10px;" v-model="queryParams.content"
                placeholder="请输入评论内容"></el-input>
            <el-input clearable class="filter-item" style="width: 150px;margin-left: 10px;" v-model="queryParams.userName"
                placeholder="请输入评论人"></el-input>

            <el-select v-model="queryParams.type" clearable placeholder="评论类型"
                style="margin-left:5px;width:110px;margin-left: 10px;">
                <el-option v-for="item in commentTypeDictList" :key="item.uid" :label="item.dictLabel"
                    :value="item.dictValue"></el-option>
            </el-select>

            <el-select v-model="queryParams.source" clearable placeholder="评论来源"
                style="margin-left:5px;width:110px;margin-left: 10px;">
                <el-option v-for="item in commentSourceDictList" :key="item.uid" :label="item.dictLabel"
                    :value="item.dictValue"></el-option>
            </el-select>

            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFind"
                v-permission="'/comment/getList'" style="margin-left: 10px;">查找</el-button>
            <el-button class="filter-item" type="danger" @click="handleDeleteBatch" icon="el-icon-delete"
                v-permission="'/comment/deleteBatch'" style="margin-left: 10px;">删除选中</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>

            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column label="评论人" width="150" align="center">
                <template slot-scope="scope">
                    <el-tag type="primary" v-if="scope.row.user" style="cursor: pointer;"
                        @click.native="goUser(scope.row.user)">{{ scope.row.user.nickName }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="被评论人" width="150" align="center">
                <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.toUser" style="cursor: pointer;"
                        @click.native="goUser(scope.row.toUser)">{{ scope.row.toUser.nickName }}</el-tag>
                    <el-tag type="info" style="cursor: pointer;" v-else>无</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="类型" width="80" align="center">
                <template slot-scope="scope">
                    <template>
                        <el-tag type="danger" v-if="scope.row.type == 1">点赞</el-tag>
                        <el-tag type="success" v-if="scope.row.type == 0">评论</el-tag>
                    </template>
                </template>
            </el-table-column>

            <el-table-column label="来源" width="80" align="center">
                <template slot-scope="scope">
                    <template>
                        <el-tag type="warning" @click.native="goPage(scope.row.source, scope.row.blog)"
                            style="cursor: pointer;">{{ scope.row.sourceName }}</el-tag>
                    </template>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" width="160" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="150">
                <template slot-scope="scope">
                    <!--          <el-button @click="handleReply(scope.row)" type="success" size="small">回复</el-button>-->
                    <el-button @click="handleDelete(scope.row)" type="danger" size="small"
                        v-permission="'/comment/delete'">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
                layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getListByDictTypeList } from "@/api/sysDictData"
import { getCommentList } from '@/api/comment'
export default {
    name: '',
    created() {
        // 获取评论
        this.commentList();

        // 获取字典
        this.getDictList()
    },
    data() {
        return {
            // xss白名单配置
            options: {
                whiteList: {
                    a: ['href', 'title', 'target'],
                    span: ['class'],
                    h1: ['class'],
                    h2: ['class'],
                    h3: ['class'],
                    h4: ['class'],
                    pre: [],
                    code: ['class'],
                    p: ['class']
                }
            },
            queryParams: {
                content: null, //评论名
                userName: null, //用户名
                type: null, //类型
                source: null, //来源
            }, //查询参数
            multipleSelection: [], //多选，用于批量删除
            BLOG_WEB_URL: process.env.BLOG_WEB_URL,
            tableData: [],
            keyword: "",
            currentPage: 1,
            pageSize: 10,
            total: 0, //总数量
            title: "增加友链",
            dialogFormVisible: false, //控制弹出框
            formLabelWidth: '120px',
            isEditForm: false,
            commentTypeDictList: [], //评论类型字典
            commentSourceDictList: [], //评论来源字典
            commentTypeDefaultValue: null, // 评论类型默认值
            defaultAvatar: '', // 默认头像
        };
    },
    methods: {
        getDictList() {
            let dictTypeList = ['sys_comment_type', 'sys_comment_source']
            getListByDictTypeList(dictTypeList).then(res => {
                if (res.code == 200) {
                    let dictMap = res.data;
                    this.commentTypeDictList = dictMap.sys_comment_type
                    this.commentSourceDictList = dictMap.sys_comment_source
                    if (dictMap.sys_comment_type.defaultValue) {
                        this.commentTypeDefaultValue = dictMap.sys_comment_type.defaultValue
                        this.queryParams.type = this.commentTypeDefaultValue
                    }
                }
            })
        },
        commentList() {
            let params = {}
            params.keyword = this.queryParams.content
            params.userName = this.queryParams.userName
            params.type = this.queryParams.type
            params.currentPage = this.currentPage
            params.pageSize = this.pageSize
            getCommentList(params).then(response => {
                this.tableData = response.data.records;
                this.currentPage = response.data.current;
                this.pageSize = response.data.size;
                this.total = response.data.total;
            })
        },
        handleFind() {
            this.commentList()
        },
        handleDeleteBatch() {

        },
        handleSelectionChange() {

        },
        goUser() {

        },
        goPage() {

        },
        handleDelete() {

        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.commentList()

        }
    }
}
</script>

<style scoped></style>